<template>
	<view class="gy-evaluate-list">
		<view class="gy-evaluate-item" v-for="(item, index) in props.list" :key="index">
			<com-avatar :src="item[props.alias.avatar] ? item[props.alias.avatar] : ''" :size="80" :radius="50" />
			<view class="gy-evaluate-details">
				<view class="gy-evaluate-info">
					<view class="gy-evaluate-user">
						<view class="gy-evaluate-user-name">{{ proxy.utils.desensitization.name(item[props.alias.name]) }}</view>
						<view v-if="item[props.alias.sex] && item[props.alias.sex] === '2'" class="gy-evaluate-user-gender gy_icon_woman"></view>
						<view v-if="item[props.alias.sex] && item[props.alias.sex] === '1'" class="gy-evaluate-user-gender gy_icon_man"></view>
						<view v-if="item[props.alias.age]" class="gy-evaluate-user-age">{{ item[props.alias.age] }}岁</view>
						<!-- <view class="gy-evaluate-user-tag nurse">护</view> -->
					</view>
					<com-rate v-model="item[props.alias.grade]" onlyRead />
				</view>
				<view class="gy-evaluate-time">{{ proxy.utils.date.format(item[props.alias.time], "yyyy.MM.dd hh:mm") }}</view>
				<view class="gy-evaluate-content">{{ item[props.alias.content] }}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>

	import {
		getCurrentInstance
	} from "vue";

    const props = defineProps({
        list: {
        	type: Array,
    		default: () => []
        },
		alias: {
        	type: Object,
    		default: {
				name: 'name',
				avatar: 'avatar',
				age: 'age',
				sex: 'sex',
				grade: 'grade',
				time: 'time',
				content: 'content'
			}
        }
    });

	const { proxy }: any = getCurrentInstance();

</script>

<style lang="scss" scoped>
	.gy-evaluate-list{
		.gy-evaluate-item{
		    padding: var(--gy-gap) 0;
		    @include flex-between;
		    .gy-evaluate-details{
		        width: calc(100% - 100rpx);
		        .gy-evaluate-info{
		            @include flex-between-center;
		            .gy-evaluate-user{
		                @include flex-start-center;
		                .gy-evaluate-user-name{
		                    font-size: var(--gy-font-size-medium);
		                    color: var(--gy-text-color-primary);
		                    font-weight: bold;
		                }
		                .gy-evaluate-user-gender{
		                    font-size: var(--gy-font-size-small);
		                }
		                .gy-evaluate-user-gender.gy_icon_woman{
		                    color: #FE6897;
		                }
		                .gy-evaluate-user-gender.gy_icon_man{
		                    color: var(--gy-color-primary);
		                }
		                .gy-evaluate-user-age{
		                    font-size: var(--gy-font-size-base);
		                    color: var(--gy-text-color-secondary);
		                    font-weight: 400;
		                }
		                .gy-evaluate-user-tag{
		                    @include flex-center-center;
		                    width: 34rpx;
		                    height: 34rpx;
		                    color: #ffffff;
		                    font-size: var(--gy-font-size-small);
		                    border-radius: var(--gy-border-radius-base);
		                }
		                .gy-evaluate-user-tag.nurse{
		                    background-color: #FE6897;
		                }
		                view+view{
		                    margin-left: 20rpx;
		                }
		            }
		        }
		        .gy-evaluate-time{
		            margin-top: 10rpx;
		            font-size: var(--gy-font-size-small);
		            color: var(--gy-text-color-secondary);
		            font-weight: 400;
		        }
		        .gy-evaluate-content{
		            margin-top: 15rpx;
		            font-size: var(--gy-font-size-base);
		            color: var(--gy-text-color-regular);
		            line-height: 40rpx;
		            font-weight: 400;
		        }
		    }
		}
		.gy-evaluate-item+.gy-evaluate-item{
		    border-top: 1rpx solid #f3f3f3;
		}
	}
</style>
